<template>
	<view>
		<nav-bar-sub></nav-bar-sub>
		<view class="" :key="dropKey">
			<u-dropdown class="drop">
				<u-dropdown-item v-model="selections.subject" title="学科" :options="subjects_options"></u-dropdown-item>
				<u-dropdown-item v-model="selections.status" title="状态" :options="status_options"></u-dropdown-item>
			</u-dropdown>
		</view>
		<showcourse :list="showList" :key='showKey'>
		</showcourse>
		<view class="empty" v-if="showList.length === 0">
			<u-empty text="数据为空" mode="list" icon-size="240" font-size="35" ></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showList:[],
				course_list: [],
				showKey: 0,
				dropKey: 50,
				selections: {
					subject: 1,
					status: 1,
				},
				subjects_options: [{
					label: '全部',
					value: 1
				}, {
					label: '',
					value: 2
				}, {
					label: '',
					value: 3
				}],
				status_options: [{
					label: '全部',
					value: 1
				}, {
					label: '未学习',
					value: 2
				}, {
					label: '学习中',
					value: 3
				}],
				
			}
		},
		methods: {
			
		},
		watch: {
			selections: {
				handler(val, oldval) {
					if (val.subject === 1 && val.status === 1) {
						this.showList = this.course_list
					} else {
						this.showList = []
						this.course_list.forEach((item, index) => {
							if ((val.subject === 1 || item.subjectName === this.subjects_options[val.subject - 1].label) &&
								(val.status === 1 || item.status === val.status-1)) {
								this.showList.push(item)
							}
						})
					}
					this.showKey += 1
				},
				deep: true
			}
		},
		onReady: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.$api.getMyCourseParams(this.$store.state.access_token,'')
			.then(res=>{
				res.values.subjects.forEach((item, index) => {
					this.subjects_options[index + 1] = {
						label: item.name,
						value: Number(index + 2)
					}
				})
				this.dropKey += 1
				return this.$api.getMyCourseList(this.$store.state.access_token)
			}).then(res=>{
				this.course_list = res.values.records
				this.showList = res.values.records
			})
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background-color: $uni-bg-color;
	}
	.empty {
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
</style>
